<template>
  <div>
    <h1>你好啊,{{ schoolName }}</h1>
    <h1>你好啊,{{ studentName }}</h1>
    <school :sendSchoolName="sendSchoolName"></school>
    <!--    给school绑定一个自定义事件 时间名自定义 事件回调在App中-->
    <!--    第一种写法-->
    <!--    <student v-on:cty="getStudentName" @demo="demo"></student>-->
    <!--    只执行一次-->
    <!--    <student v-on.once:cty="getStudentName"></student>-->
<!--    给组件绑定js的原生事件 绑定时一定要加native 否则不生效-->
    <student ref="student" @click.native="show"></student>
  </div>
</template>

<script>
//导入两个组件
import school from "./components/School.vue";
import student from "./components/Student.vue";
//作用 用来汇总组件
export default {
  name: "App",
  components: {
    student,
    school,
  },
  data() {
    return {
      msg: '你好！ 我是彭于晏',
      studentName: '',
      schoolName: ''
    }
  },
  methods: {
    output() {
      //在vue脚手架中获得dom元素
      console.log(this.$refs.h1)
      //如果是子组件 指向的是子组件的VueComponent实例
      console.log(this.$refs.sch)
    },
    sendSchoolName(name) {
      this.schoolName = name;
    },
    //传更多的参数 应该在后面传
    getStudentName(name) {
      this.studentName = name;
      console.log(name)
    },
    demo() {
      console.log('demo 被调用了');
    },
    show() {
      alert('123');
    }
  },

  mounted() {
    //在这里用vc绑定事件 如果只想执行一次 用once 绑定事件的另一种方法
    // this.$refs.student.$on('cty',this.getStudentName);
    //传入一个函数 注意这个函数必须是箭头函数 否则this的指向会出问题(会指向目标组件的vc)
    this.$refs.student.$on('cty',  (name) => {
          this.studentName = name;
          console.log(name)
        },
    );
    // this.$refs.student.$once('cty',this.getStudentName);
  }
}
</script>


<style>
/* 在这里面 你不建议写样式 */

</style>